
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,
  Dimensions,ScrollView 
} from 'react-native';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
var {height, width} = Dimensions.get('window');
export default class StationDetail extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='电站详情' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      emp:{},
      loading:true,
    })
    //console.log(this.props)
  }
  componentWillMount(){
    this.fetchData();
  }
  fetchData(){
    fetch(BASEURL+'getEmp?hyCode='+this.props.navigation.getParam('hyCode'))
    .then(res=>res.json())
    .then(response=>{
      console.log('res',response)
      //alert(response.apply)
      if(response.falg){
          
        this.setState({
          emp:response.emp,
          loading:false,
        })
      } else {
        this.setState({
          loading:false,
        })
        this.refs.toast.show('获取失败');
      }
      
    })
  }
  render(){
    var item = this.state.emp
    var loading = this.state.loading
    let img
    let imgStyle=styles.lefgImg
    if(item.img_name){
      img = {uri:item.img_name.split(',')[0]}
      imgStyle = {
        width:width*0.3,
        height:width*0.25,
        marginLeft:10,
        marginRight:10,
      }
    } else {
      img = require('../../images/no-img.png')
    }
    return(
      <ScrollView style={styles.container}>
        <View style={styles.headerStyle}>
          <View style={{padding:10}}>
            <Image style={imgStyle} source={img}/>
          </View>
          <View style={{flex:1,paddingRight:15}}>
            <Text style={{fontSize:17,padding:5,fontWeight:'bold'}}>{item.hy_name}</Text>
            <Text style={styles.subTitle}>所属河流：{item.river_name}</Text>
            <Text style={styles.subTitle}>地理位置：{item.com_locations}</Text>
          </View>
        </View>
        <Header title='基础信息'/>
        <Row title='开发方式' value={item.development_mode} />
        <Row title='装机容量(KW)' value={item.com_capacity} />
        <Row title='机组台数(台)' value={item.cunit_num} />
        <Row title='额定水头(m)' value={item.rated_head} />
        <Row title='引水流量(m³)' value={item.annual_in_flow} />
        <Row title='设计引水流量(m³/s)' value={item.max_in_flow} />
        <Row title='最小下泄量(水资源论证)(m³/s)' value={item.min_flow} />
        <Row title='生态流量(环评)(m³/s)' value={item.environmental} />
        <Row title='引水流量监测位置/类型' value={item.max_in_flow_type} />
        <Row title='生态流量下泄位置/流量' value={item.flood_base_flow_type} style={{borderBottomWidth:0}} />
        <Toast ref="toast"/>
      </ScrollView>
    )  
  }
}
class Header extends Component{
  render(){
    return(
      <View>
        <View style={{height:10,backgroundColor:'#f0f0f0',width:'100%'}}></View>
        <View style={styles.header}>
          <Image source={require('../../images/monitor-data.png')}/>
          <Text style={styles.headerText}>{this.props.title}</Text>
        </View>
      </View>
     
    )
  }
}
class Row extends Component{
    render(){
        return (
        <View style={[styles.row,this.props.style]}>
            <Text>{this.props.title}</Text><Text>{this.props.value}</Text>
        </View>
        )
    }
}
const styles = StyleSheet.create({
  subTitle:{
    padding:5,
    fontSize:14,
  },
  headerStyle:{
    flexDirection:'row',
    alignItems:'center'
  },  
  lefgImg:{
    width:width*0.2,
    height:width*0.2*1.23,
    marginLeft:20,
    marginRight:10,
  },
  bottomBor:{
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#ccc',
  },
  headerText:{
    fontSize:17,
    marginLeft:5,
  },
  header:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#ccc',
    paddingBottom:8,
    paddingTop:8,
    paddingLeft:15,
  },
  row:{
    flexDirection:'row',
    justifyContent:'space-between',
    paddingTop:10,
    paddingBottom:10,
    marginLeft:15,
    marginRight:15,
    borderBottomColor:'#ccc',
    borderBottomWidth:StyleSheet.hairlineWidth,
  },    
  container:{
    flex:1,
  },

})